import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Eyebrow, Section } from "@/components/section";
import { posts } from "@/lib/content";

type Props = { params: Promise<{ slug: string }> };

export async function generateStaticParams() {
  return posts.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = posts.find((p) => p.slug === slug);
  if (!post) return { title: "Insight" };
  return { title: post.title, description: post.dek };
}

export default async function InsightPostPage({ params }: Props) {
  const { slug } = await params;
  const post = posts.find((p) => p.slug === slug);
  if (!post) notFound();

  return (
    <Section className="pt-16 md:pt-24" innerClassName="max-w-2xl">
      <Link
        href="/insights"
        className="text-sm text-muted-foreground hover:text-primary"
      >
        ← Insights
      </Link>
      <Eyebrow className="mt-8">
        {post.date} · {post.reading}
      </Eyebrow>
      <h1 className="mt-4 font-heading text-4xl leading-tight md:text-5xl">
        {post.title}
      </h1>
      <p className="mt-4 text-lg leading-relaxed text-muted-foreground">
        {post.dek}
      </p>
      <div className="mt-10 space-y-5 text-[15px] leading-relaxed text-foreground/90">
        {post.paragraphs.map((para) => (
          <p key={para.slice(0, 40)}>{para}</p>
        ))}
      </div>
      <p className="mt-12 text-sm text-muted-foreground">
        {post.tags.join(" · ")}
      </p>
    </Section>
  );
}